/*
* @Author: yanyanru
* @Date: 2018/5/10
* @Last Modified by: yanyanru
* @Last Modified time: 2018/5/10
* @description: tag
*/
<template>
    <div>
      <el-form>
          <el-form-item label="标签" :label-width="labelWidth">
            <el-col :span="10">
                <el-select filterable v-model="tag1" placeholder="请选择" @change="selTag1(tag1)" style="width:100%">
                    <el-option v-for="(item,index) in tagType" :key="index" :value="item.dictValue" :label="item.dictName"></el-option>
                </el-select>
            </el-col>
            <el-col :span="14" v-if="tag1 == 1">
                <el-cascader
                    style="width:100%"
                    placeholder="请选择行业分类"
                    :options="cvIndustryListCascader"
                    filterable
                    :clearable="true"
                    change-on-select
                    @change="selIndustryData2(myIndustryDataRel2)"
                    v-model="myIndustryDataRel2"
                ></el-cascader>
            </el-col>
        </el-form-item>
        <el-form-item :label-width="labelWidth">
          <el-col>
            <el-select filterable v-model="labels" value-key="tagsName" style="width:100%" placeholder="请选择" multiple @change="addSelTags('sel',labels)">
              <el-option v-for="(item,index) in tagList" :key="index" :value="item" :label="item.tagsName"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
         <el-form-item label="关键字" :label-width="labelWidth">
          <el-col :span="16">
            <el-autocomplete
              :fetch-suggestions="querySearch"
              class="inline-input"
              v-model="keyInput"
              placeholder="请输入关键字"
              :trigger-on-focus="false"
              :maxlength="100"
              style="width:100%"
            ></el-autocomplete>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-button type="primary" style="width:100%" :disabled="keyInput==''" @click="addSelTags('add')">添加</el-button>
          </el-col>
        </el-form-item>
        <el-form-item :label-width="labelWidth">
            <el-row class="ca-box minheight">
            <el-tag
                v-for="(tag,index) in tagsDataRelListArr"
                :key="index"
                closable
                :type="tag.tagsId==null?'':'success'"
                @close="handleClose(tag)">
                {{tag.tagName}}
            </el-tag>
            </el-row>
        </el-form-item>
      </el-form>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import CommonService from '../../service/common/index';
import { ComTagDto, } from '../../api/Interface';
@Component
export default class Tag extends Vue {
    @Prop()
    public itemId: number;  //业务id
     @Prop({default: 15})
    public itemType: number;  //业务类型 人物15
    @Prop()
    public tagsDataRelList: ComTagDto[];
    // 初始化数据
    public tag1: string = '';
    public labelWidth: string = '100px';
    public cvIndustryList = this.$store.state.user.dictionary.cvIndustryList;
    public cvIndustryListCascader = this.getCascaderData( {data: this.cvIndustryList} );
    public myIndustryDataRel2: string[] = [];
    public tagType: object[] = this.$store.state.user.dictionary.dicList.tabOneLevelType;
    public tagList: object[] = []; // 存放 所有标签的数组
    public labels: string[] = [];
    public keyInput: string = ''; // 关键字
    // public tagsDataRelList: ComTagDto[] = []; // 盒子
    public tagsDataRelListArr: ComTagDto[] = []; // 自定义
    public selectList: ComTagDto[] = []; // 下拉菜单所有数据
    public keyList: ComTagDto[] = []; // 关键字所有数据
    public result: object[] = [];
    @Watch('tagsDataRelList')
    public onChildChanged(val: any, oldVal: any) {
        this.tagsDataRelListArr = val;
    }
    // 声明周期钩子
    // public created() {
    //     // 获取标签列表
    //     this.getTagList();
    // }
    public mounted() {
        this.getTagList(); 
    }
   public getCascaderData({ data = [], name = 'name', key = 'id', children = 'children' }: any) {
        const newArr = data.map((x: any) => {
            const _arr: {value: string; label: string; children: object[]|null} = {
                value: x[key],
                label: x[name],
                children: null
            };
            if (x[children] && x[children].length !== 0) {
                _arr.children = this.getCascaderData({ data: x[children], name, key, children });
            } else {
                _arr.children = null;
            }
            return _arr;
        });
        return newArr;
    }
     // 方法
     // 改变一级菜单时候 
     public async selTag1(val: string, bool: boolean = false) {
         this.labels = [];
         const res = await CommonService.getTagListByType({tagType: val});
         this.tagList = res.data;
         if (val === '1' && !bool) {
            //  this.selIndustryData2(this.myIndustryDataRel2);
         }
     }
     // 获取二三级菜单
     public async selIndustryData2(idList: string[]) {
        const res = await CommonService.getTagsByIndustryId((idList[idList.length - 1]));
        this.tagList = res;
     }
     // 获取标签列表
     public async getTagList() {
        const res = await CommonService.getTagList();
        this.tagList = res.data;
     }  
     // 点击第四级菜单 》 框
     public addSelTags(type: string, value: ComTagDto[]) {
        // if (type === 'sel') {
        //     this.selectList = [];
        //     value.map( (item, index) => {
        //         const tagName = 'tagsName';
        //         this.selectList.push({
        //             companyId: 0,         //工商id
        //             tagId: item.id,         //企业标签(取标签字典id,手动填写时没有当前字段数据)
        //             businessId: this.itemId,         //业务id（企业id,基金id,Lpid ，人物 15）
        //             enableUpdate: 1, //是否更新
        //             operateType: 1,       //操作类型1人工编辑,2自动计算
        //             showStatus: 1,      //是否cvs显示1是2否
        //             id: 0,         //主id
        //             businessType: this.itemType,    //业务类型：1:企业,3:基金,4:Lp
        //             tagName: item[tagName],         //企业标签名字
        //             dataCount: 0
        //         });
        //     });
        // } else {
        //     this.keyList.push({
        //         companyId: 0,         //工商id
        //         tagId: 0,         //企业标签(取标签字典id,手动填写时没有当前字段数据)
        //         businessId: this.itemId,         //业务id（企业id,基金id,Lpid）
        //         enableUpdate: 1,
        //         operateType: 1,       //操作类型1人工编辑,2自动计算
        //         showStatus: 1,      //是否cvs显示1是2否
        //         id: 0,         //主id
        //         businessType: this.itemType,         //业务类型：1:企业,3:基金,4:Lp
        //         tagName: this.keyInput,         //企业标签名字
        //         dataCount: 0,
        //     });
        //     this.keyInput = '';
        // }
        // const arr = this.selectList.concat(this.keyList);
        // this.tagsDataRelListArr =  this.tagsDataRelList.concat(arr);
        // this.$emit('addTagsDataRelList', this.tagsDataRelListArr);
     } 
     // 模糊搜索手动输入标签
     public async querySearch(name: string, cb: any) {
        const res = await CommonService.tagSearch({tagName: name});
        this.result = res.data;
        if (this.tagsDataRelListArr.length > 0) {
            if (name.trim().replace(/\s/g, '') !== '') {
                cb(this.result);
            }
        } else {
            cb(this.result);
        }  
     }
     // 关闭标签
    public handleClose(tag: ComTagDto) {
        this.tagsDataRelListArr.splice(this.tagsDataRelListArr.indexOf(tag), 1);
        // 删除标签下拉已经选中的标签
        const tagsName = 'tagsName';
        for (const i in this.labels) {
            if (this.labels[i][tagsName] === tag.tagName) {
                this.labels.splice(Number(i), 1);
                break;
            }
        }
    }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.minheight{
  height: 150px;
  overflow-y: auto;
  padding: 0 10px;
  border-radius: 5px;
}
.ca-box {
    background: #fff;
    border: #dbe3ea 1px solid;
}
</style>
